<template>
  <div class="table-header-filter">
    <el-button type="text" v-popover:dialog class="icon-btn" :style="{color: text ? '#1890ff' : ''}" @click.stop>
      <span>{{$attrs.label}} </span>
      <i class="el-icon-search"></i>
    </el-button>
    <el-popover ref="dialog" placement="bottom" popper-class="ad-table-filter-box">
      <div>
        <el-input size="mini" v-model="text" @keyup.enter.native="search" clearable/>
      </div>
      <div style="margin-top: 5px;">
        <el-button size="mini" type="primary" plain class="search" @click="search">查询</el-button>
        <el-button size="mini" type="primary" plain class="search" @click="resetSerch">重置</el-button>
      </div>
    </el-popover>
  </div>
</template>

<script>
  import {findComponentAttrsField} from '@/utils/find'

  export default {
    data() {
      return {
        query: {},
        text: ''
      }
    },
    created() {
      this.query = findComponentAttrsField(this, 'searchQuery')
    },
    methods: {
      search() {
        this.query[this.$attrs.queryName] = this.text
        this.$emit('search')
        this.$refs.dialog.doClose()
      },
      resetSerch() {
        let self = this;
        self.text = '';
        self.search()
      }
    }
  }
</script>

<style lang="scss">
  .ad-table-filter-box {
    /*display: flex;*/
    width: 180px;
    min-width: auto;
    padding: 4px;

    .search {
      margin-left: 4px;
    }
  }
</style>

<style lang="scss" scoped>
  .table-header-filter {
    .icon-btn {
      padding: 0;
      font-size: inherit;
      font-weight: inherit;
      color: inherit;

      &:hover {
        color: #4090ff;
      }
    }
  }
</style>